<template>
  <div class="container">
    <van-tabs v-model:active="active" line-width="80" sticky swipeable :lazy-render="false"
      color="#ff6347" title-active-color="#ff6347" @change="changeTab">
      <van-tab title="作品">
        <van-grid :gutter="2" :column-num="3">
          <van-grid-item v-for="works in worksList" :key="works.id">
            <div class="view-item" @click="preview(works.id)">
              <el-image :src="minioUrl+works.fimg" fit="cover" style="width:100%;height:100%">
              </el-image>
              <div v-show="works.state==1" class="view-item-bottom">
                <span class="tulin tulin-view"></span>
                {{works.view}}
                <span class="tulin tulin-like"></span>
                {{works.like}}
              </div>
              <div v-show="works.state==2" class="view-item-bottom">
                审核中...
              </div>
              <div v-show="works.state==0" class="view-item-bottom">
                未发布
              </div>
              <div v-show="works.state==3" class="view-item-bottom">
                作品违规!
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="私密">
        <van-grid :gutter="2" :column-num="3">
          <van-grid-item v-for="works in worksListPrivate" :key="works.id">
            <div class="view-item" @click="preview(works.id)">
              <el-image :src="minioUrl+works.fimg" fit="cover" style="width:100%;height:100%">
              </el-image>
              <div class="view-item-bottom">
                <!-- <el-icon :size="20">
                  <View />
                </el-icon>
                200.1w
                <span class="tulin tulin-like"></span>
                522.w -->
                自己可见哦
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="收藏">
        <van-grid :gutter="2" :column-num="3">
          <van-grid-item v-for="collection in collectionList" :key="collection.id">
            <div class="view-item" @click="preview(collection.worksId)">
              <el-image :src="minioUrl+collection.worksFImg" fit="cover"
                style="width:100%;height:100%">
              </el-image>
              <div class="view-item-bottom">
                <span class="tulin tulin-view"></span>
                {{collection.view}}
                <span class="tulin tulin-like"></span>
                {{collection.like}}
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="草稿">浏览器暂无缓存</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Grid, GridItem } from 'vant';
import { Tab, Tabs } from 'vant';
import { minioUrl } from '../../base/index';
export default {
  name: 'GWorksView',
  data () {
    return {
      active: 0,
      tabs: ["作品", "私密", "收藏", "草稿"],
      worksList: [],
      worksListPrivate: [],
      collectionList: [],
      minioUrl,
    }
  },
  components: {
    VanTabs: Tabs, VanTab: Tab, VanGrid: Grid, VanGridItem: GridItem,
  },
  mounted () {
    this.getWorksView();
  },
  methods: {
    getWorksView () {
      this.$axios.get("/works/worksview/works").then(res => {
        if (res.flag) {
          for (var key in res.data) {
            if (res.data[key].permission == 1) {
              this.worksList.push(res.data[key])
            }
            if (res.data[key].permission == 0) {
              this.worksListPrivate.push(res.data[key])
            }
          }
        }
      })
    },
    //查看作品详情
    preview (id) {
      //跳转详情
      this.$router.push({ name: '作品详情', params: { worksId: id } });
    },

    //标签变化
    changeTab (name, title) {
      console.log(11111);
      if (title == "收藏") {
        this.getCollections(1, 10000);
      }
    },
    //获取收藏列表
    getCollections (pageNum, pageSize) {
      this.$axios.get("/collection/" + pageNum + "/" + pageSize).then((res) => {
        console.log(res)
        if (res.flag) {
          this.collectionList = res.data;
          // if (res.data.length < 1) {
          //   // this.morePhotos = false
          // } else {
          //   for (var key in res.data) {
          //     this.collectionList.push(res.data[key]);
          //   }
          // }
        }
      })
    },
  }
}
</script>

<style scoped>
.view-item {
  width: 100%;
  height: 150px;
  position: relative;
}
.view-item-bottom {
  position: absolute;
  color: white;
  padding-left: 5px;
  height: 25px;
  width: calc(100% - 5px);
  line-height: 25px;
  font-size: 12px;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.tulin-like,
.tulin-view {
  font-size: 12px;
}

.container >>> .van-grid-item__content {
  padding: 0;
}
</style>